
@import '@/uni_modules/uview-plus/theme.scss';
$primary-color: #007aff;
$primary-light: #4da6ff;
$primary-dark: #0056cc;
$primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);


$success-color: #52c41a;
$warning-color: #fa8c16;
$error-color: #ff4d4f;
$info-color: #1890ff;


$text-primary: #333333;
$text-secondary: #666666;
$text-tertiary: #999999;
$text-placeholder: #999999;
$text-disabled: #cccccc;
$text-white: #ffffff;

$bg-primary: #ffffff;
$bg-secondary: #f5f5f5;
$bg-tertiary: #fafafa;
$bg-light-gray: #f8f8f8;
$bg-color: #f8f9fa;
$bg-white: #ffffff;

$border-light: #e5e5e5;
$border-normal: #d9d9d9;
$border-dark: #cccccc;

$font-size-xs: 20rpx;
$font-size-sm: 24rpx;
$font-size-base: 28rpx;
$font-size-lg: 32rpx;
$font-size-xl: 36rpx;
$font-size-xxl: 40rpx;
$font-size-xxxl: 48rpx;

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 600;
$font-weight-bolder: 700;

$line-height-xs: 1.2;
$line-height-sm: 1.3;
$line-height-base: 1.4;
$line-height-lg: 1.5;
$line-height-xl: 1.6;

$margin-xs: 8rpx;
$margin-sm: 12rpx;
$margin-base: 16rpx;
$margin-md: 20rpx;
$margin-lg: 24rpx;
$margin-xl: 32rpx;
$margin-xxl: 40rpx;

$padding-xs: 8rpx;
$padding-sm: 12rpx;  
$padding-base: 16rpx;
$padding-md: 20rpx;
$padding-lg: 24rpx;
$padding-xl: 32rpx;
$padding-xxl: 40rpx;

$border-radius-xs: 4rpx;
$border-radius-sm: 8rpx;
$border-radius-base: 12rpx;
$border-radius-md: 16rpx;
$border-radius-lg: 20rpx;
$border-radius-xl: 24rpx;
$border-radius-circle: 50%;

$box-shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
$box-shadow-normal: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
$box-shadow-dark: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);

$status-available: #52c41a;
$status-rented: #fa8c16;
$status-maintenance: #ff4d4f;
$status-offline: #d9d9d9;

$status-available-text: #52c41a;
$status-unavailable: #fff2e8;
$status-unavailable-text: #fa8c16;
$status-pending: #fff7e6;
$status-pending-text: #fa8c16;
$status-confirmed: #e6f7ff;
$status-confirmed-text: #1890ff;
$status-completed: #f0f0f0;
$status-completed-text: #666666;
$status-cancelled: #fff2f0;
$status-cancelled-text: #ff4d4f;

$price-color: #ff6b35;
$price-unit-color: #999999;

$page-padding: 20rpx;
$card-padding: 30rpx;
$section-margin: 20rpx;

$device-image-size: 120rpx;
$device-image-radius: $border-radius-base;

$avatar-size-sm: 60rpx;
$avatar-size-base: 80rpx;
$avatar-size-lg: 120rpx;

$border-color: #f0f0f0;

$box-shadow-sm: $box-shadow-light;

$font-size-md: 32rpx;

$animation-duration-base: 0.3s;
$animation-duration-fast: 0.2s;
$animation-duration-slow: 0.5s;

$z-index-popup: 9997;

$container-sm: 540rpx;
$container-md: 720rpx;
$container-lg: 960rpx;
$container-xl: 1140rpx;

$z-index-toast: 9999;
$z-index-modal: 9998;
$z-index-mask: 9996;
$z-index-header: 100;
$z-index-tabbar: 99;

$transition-fast: 0.2s;
$transition-base: 0.3s;
$transition-slow: 0.5s;

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.text-primary {
  color: $text-primary;
}

.text-secondary {
  color: $text-secondary;
}

.text-white {
  color: $text-white;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: $font-weight-bold;
}

.text-medium {
  font-weight: $font-weight-medium;
}

.m-0 { margin: 0; }
.mt-1 { margin-top: $margin-xs; }
.mt-2 { margin-top: $margin-sm; }  
.mt-3 { margin-top: $margin-base; }
.mt-4 { margin-top: $margin-lg; }
.mt-5 { margin-top: $margin-xl; }

.mb-1 { margin-bottom: $margin-xs; }
.mb-2 { margin-bottom: $margin-sm; }
.mb-3 { margin-bottom: $margin-base; }
.mb-4 { margin-bottom: $margin-lg; }
.mb-5 { margin-bottom: $margin-xl; }

.p-0 { padding: 0; }
.pt-1 { padding-top: $padding-xs; }
.pt-2 { padding-top: $padding-sm; }
.pt-3 { padding-top: $padding-base; }
.pt-4 { padding-top: $padding-lg; }
.pt-5 { padding-top: $padding-xl; }

.pb-1 { padding-bottom: $padding-xs; }
.pb-2 { padding-bottom: $padding-sm; }
.pb-3 { padding-bottom: $padding-base; }
.pb-4 { padding-bottom: $padding-lg; }
.pb-5 { padding-bottom: $padding-xl; }

.rounded-sm { border-radius: $border-radius-sm; }
.rounded { border-radius: $border-radius-base; }
.rounded-lg { border-radius: $border-radius-lg; }
.rounded-full { border-radius: $border-radius-circle; }

.bg-white { background-color: $bg-white; }
.bg-gray { background-color: $bg-secondary; }
.bg-primary { background-color: $primary-color; }

/* 阴影工具类 */
.shadow-sm { box-shadow: $box-shadow-light; }
.shadow { box-shadow: $box-shadow-normal; }
.shadow-lg { box-shadow: $box-shadow-dark; }

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: $border-radius-circle;
  background-color: $bg-secondary;
}

.user-avatar-lg {
  width: 120rpx;
  height: 120rpx;
  border-radius: $border-radius-circle;
  background-color: $bg-secondary;
}

.status-tag {
  display: inline-block;
  padding: 6rpx 12rpx;
  font-size: $font-size-xs;
  border-radius: $border-radius-sm;
  color: $text-white;
  
  &.available {
    background-color: $status-available;
  }
  
  &.rented {
    background-color: $status-rented;
  }
  
  &.maintenance {
    background-color: $status-maintenance;
  }
  
  &.offline {
    background-color: $status-offline;
  }
}

.price-tag {
  display: flex;
  align-items: baseline;
  
  .price-symbol {
    font-size: $font-size-sm;
    color: $price-color;
  }
  
  .price-amount {
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    color: $price-color;
  }
  
  .price-unit {
    font-size: $font-size-xs;
    color: $price-unit-color;
    margin-left: 4rpx;
  }
}

.device-card {
  background-color: $bg-white;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-light;
  padding: $padding-base;
  margin-bottom: $margin-base;
  
  .device-image {
    width: 100%;
    height: 240rpx;
    border-radius: $border-radius-sm;
    background-color: $bg-secondary;
  }
  
  .device-title {
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    color: $text-primary;
    margin: $margin-sm 0;
  }
  
  .device-desc {
    font-size: $font-size-sm;
    color: $text-secondary;
    line-height: $line-height-base;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $padding-sm $padding-base;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  transition: all $transition-fast;
  
  &.btn-primary {
    background-color: $primary-color;
    color: $text-white;
  }
  
  &.btn-outline {
    border: 2rpx solid $primary-color;
    color: $primary-color;
    background-color: transparent;
  }
  
  &.btn-sm {
    padding: $padding-xs $padding-sm;
    font-size: $font-size-sm;
  }
  
  &.btn-lg {
    padding: $padding-md $padding-lg;
    font-size: $font-size-lg;
  }
}
